<template>
    <div class="CkScan">
        <div class="nav">
            <div class="return" v-on:click="back()">
                <span class="arrow"></span>
                <span class="back">返回</span>
            </div>
            <div class="nav_text">
                <p>{{scan_name}}</p>
            </div>
        </div>
        <div class="scan">
            <p>单据条形码：</p>
            <img src="./../../../static/img/4.png">
        </div>
        <div class="img">
            <input class="is_search" @keyup='change_inp($event)' v-model='inp_val' />
        </div>
    </div>
</template>
<script>
export default {
    name: "CkScan",
    data() {
        return {
            inp_val: '',
            scan_name: '',
            link_for: ''
        }
    },
    methods: {
        back: function() {
            history.go(-1);
        },
        link_: function() {//BA0601B000020001
            let this_ = this;
            setTimeout(function() {
                this_.$router.push({ path: `/${this_.link_for}` });
            }, 100);
        },
        change_inp: function(ev) {

            if (ev.keyCode == 13) {
                sessionStorage.setItem('invcode', this.inp_val);
                this.link_();
            }
        }
    },
    created: function() {
        let name_ = sessionStorage.getItem('target_')
        if (name_ == 'ck') {
            this.scan_name = '出库单扫描';
            this.link_for = 'Delivery';
        }
        if (name_ == 'll') {
            this.scan_name = '领料扫描';
            this.link_for = 'MaterialAffirm';
        }
        //光标锁定
        let re = sessionStorage.getItem('reload')
        if (re == 1) {
            window.location.reload();
            sessionStorage.removeItem('reload');
        }

        window.onload = function() {
            let oInput = $('.is_search');
            oInput.focus();
        }
    }
}
</script>
<style lang="css" scoped>
.is_search {
    width: 85%;
    height: 50px;
    border: 1px solid gray;
    padding: 10px;
    font-size: 20px;
    border-radius: 5px;
}

.scan {
    text-align: right;
    margin: 1.5rem;
}

.scan p {
    display: inline-block;
    font-size: 1.3rem;
    color: #49A1DE;
}

.scan img {
    width: 2.5rem;
    padding-bottom: 0.5rem;
    vertical-align: middle;
}

.img img {
    width: 26rem;
}

.img {
    margin-top: 8rem;
    text-align: center;
}

.arrow {
    border: 0.15rem solid #fff;
    border-width: 0.15rem 0 0 0.15rem;
    display: inline-block;
    height: 0.85rem;
    width: 0.85rem;
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(135deg);
    -webkit-transition: all .5s ease-in .1s;
    transform-origin: center center;
    transform: rotate(-45deg);
    transition: all .5s ease-in .1s;
}

.return {
    padding-left: 1.5rem;
    width: 44%;
}

.back {
    font-size: 1.3rem;
    color: #fff;
}

.nav {
    line-height: 4.7rem;
    display: -webkit-box;
    background: #668292;
    height: 4.7rem;
}

.nav_text {

    font-size: 1.6rem;
    color: #fff;
}
</style>